<template>
  <el-row class="flex-column template-page">
    <el-row id="apassMicroTemplateConfig" class="page-container mp-micro" />
  </el-row>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { loadMicroApp } from 'qiankun'
import { CommonModule } from '@/store/modules/common'
import { TemplateModule } from '@/store/modules/config/template'

@Component({
  name: 'customerTemplate',
  components: {
  }
})

export default class CustomerTemplate extends Vue {
  private $route: any
  private $router: any
  private microApp: any
  private $store: any

  // #region 子应用注册函数
  private initMicroApp (store: any) {
    this.$set(store, 'routerGoBackFunc', () => {
      this.$router.push('/setting_center/index/customer_template_setting/setting') // v7的回调
    })
    const activeRule = `/setting_center/index/customer_template_setting/edit/${this.$route.params._id.split('/')[0]}`
    CommonModule.getMpInfo({ url: '/auth/get/mp/relation', method: 'POST', data: {} }).then(() => {
      this.microApp = loadMicroApp(
        {
          // 测试子应用
          name: 'apass-micro-templateConfig', // 子应用 package.json 的 name
          // entry: 'http://localhost:8080/templateConfig.html', // 本地测试环境
          // entry: 'http://localhost:15610/templateConfig.html', // 本地15610测试环境
          // entry: 'http://power-uat.7moor.com/templateConfig.html', // 线上测试环境
          // entry: `${window.sessionStorage.getItem('mopowerUrl')}/templateConfig.html`,
          entry: `${(CommonModule.initConfig as any).platformConfig.mopowerUrl}/templateConfig.html`,
          // entry: 'http://172.16.88.180:8081/templateConfig.html', // 亚军本地
          container: '#apassMicroTemplateConfig', // 子应用挂载的节点
          props: {
            routerBase: activeRule, // 同 activeRule
            store,
            user: {
              id: this.$store.state.common.mpInfo.mpUserId,
              companyId: this.$store.state.common.mpInfo.mpCompanyId
            }
            // user: { companyId: 131, id: 18271 }
          }
        },
        {
          sandbox: {
            // strictStyleIsolation: true, // 以 Shadow DOM 的形式嵌入微应用
            // experimentalStyleIsolation: true // 类似于 vue scoped 的形式改写子应用样式，增加特殊选择器，类似于：div[data-qiankun-vue16]
          }
        }
      )
    })
  }

  private unmountMicroApp () {
    if (this.microApp) {
      this.microApp.mountPromise.then(() => {
        if (this.microApp.getStatus() === 'MOUNTED') {
          this.microApp.unmount()
        }
      })
    }
  }
  // #endregion

  public activated () {
    const routerTo = this.$route.query.routerTo || 'fields';
    this.$nextTick(() => {
      TemplateModule.TemplateCommonAction({ url: `/crm/action/template/${this.$route.params._id.split('/')[0]}`, method: 'GET' }).then(res => {
        if (res && res.success) {
          const store = {
            applicationId: res.data.applicationId,
            worksheetId: res.data.worksheetId,
            routerTo
          }
          this.initMicroApp(store)
        }
      })
    })
  }

  private beforeRouteLeave (to: any, from: any, next: any) {
    this.unmountMicroApp()
    next()
  }
  // #endregion
}
</script>

<style lang="stylus" scoped>
  .template-page
    .page-header
      height 30px
      .header-left
        font-size: 14px
        font-weight: 900
      .header-right
        text-align: right
    .page-container
      flex 1
      border-radius 10px
      box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
      margin 0 2px 2px 0
      height calc(100%)
      overflow auto
      background white url('../../../assets/img/loading.gif') no-repeat center center
      background-size 1.2 1.2
</style>
